<template>
  <div id="slide">
     <el-menu
      class="el-menu-vertical-demo"
      router
      :default-active='activeMenu'
      :unique-opened="true"
      active-text-color="#1E7CF0"
    >
      <!-- 一级菜单 -->
      <template v-for="item in data">
        <el-submenu v-if="item.subs && item.subs.length" :index="item.index" :key="item.index">
          <template slot="title">
            <i :class="[item.icon, 'iconfont']"></i>
            <span>{{item.title}}</span>
          </template>
          <!-- 二级菜单 -->
          <template v-for="itemChild in item.subs">
            <el-submenu
              v-if="itemChild.subs && itemChild.subs.length"
              :index="itemChild.index"
              :key="itemChild.index"
            >
              <template slot="title">
                <i :class="itemChild.icon"></i>
                <span>{{itemChild.title}}</span>
              </template>
              <!-- 三级菜单 -->
              <el-menu-item
                v-for="itemChild_Child in itemChild.subs"
                :index="itemChild_Child .index"
                :key="itemChild_Child.index"
              >
               <i :class="itemChild_Child.icon"></i>
                <span slot="title">{{itemChild_Child.title}}</span>
              </el-menu-item>
            </el-submenu>
            <el-menu-item v-else :index="itemChild.index" :key="itemChild.index">
              <i :class="itemChild.icon"></i>
              <span slot="title">{{itemChild.title}}</span>
            </el-menu-item>
          </template>
        </el-submenu>
        <el-menu-item v-else :index="item.index" :key="item.index">
          <i :class="[item.icon, 'iconfont']"></i>
          <span slot="title">{{item.title}}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'slide',
  data () {
    return {
      activeMenu: '',
      data: [
        {
          index: "/home/index",
          icon: "icontongyong_dangqianweizhi",
          title: "首页"
        },
         {
          index: "/home/enterInfo",
          icon: "iconxiangmu",
          title: "信息录入"
        },
        {
          index: "/home/enterInfoSec",
          icon: "iconxiangmu",
          title: "资产信息录入"
        },
        {
          index: "1",
          icon: 'iconxiangmu',
          title: "项目",
          subs: [
            {
              index: "/newProject",
              title: "新增项目"
            },
            {
              index: "/projectList",
              title: "项目列表"
            }
          ]
        },
        {
          index: "2",
          icon: 'iconkehu',
          title: "客户",
          subs: [
            {
              index: "/customer",
              title: "客户列表"
            },
            // {
            //   index: "/uploadFile",
            //   title: "上传文件"
            // },
            //  {
            //   index: "/viewFile",
            //   title: "查看文件"
            // },
          ]
        },
        {
          index: "3",
          icon: 'iconhoutaiguanli',
          title: "系统",
          subs: [
            {
              index: "/accountManagement",
              title: "账号管理"
            }
          ]
        }
      ]
    };
  },
  watch: {
    $route: {
    handler: function (val, oldVal) {
      this.activeMenu = val.path;
    },
    immediate: true
  }
  }
};
</script>

<style lang="scss">
  #slide {
    position: fixed;
    width: 200px;
    padding-right: 20px;
    top: 70px;
    left: 0;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    .el-menu {
      width: 200px;
      .slide-title {
        font-size: 16px;
      }
    }
    .el-submenu__title {
      border-bottom: 1px solid rgba(223,220,223,1);
    }
    .el-submenu__title:hover {
      background-color: #66c6fe !important;
    }
    .el-menu-item:focus,
    .el-menu-item:hover {
      background-color: #2DB2FF !important;
    }
    
    .el-submenu__title .iconfont , .el-menu-item i{
      color: #1e7cf0;
      font-size: 22px;
    }
  }
</style>
